import React, {useState} from 'react';
import {makeStyles, useTheme} from "@material-ui/styles";
import {Home, LiveHelp, PhotoLibrary} from "@material-ui/icons";
import IconButton from "@material-ui/core/IconButton";
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Drawer from "@material-ui/core/Drawer";
import ImportantDevicesIcon from '@material-ui/icons/ImportantDevices';
import Box from "@material-ui/core/Box";
import {useHistory} from 'react-router-dom';
import ListItemIcon from "@material-ui/core/ListItemIcon";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import AssignmentIcon from '@material-ui/icons/Assignment';
import {faHome} from "@fortawesome/free-solid-svg-icons";
import Grid from "@material-ui/core/Grid";
import {useSelector} from "react-redux";


const drawerWidth = 300;
const useStyles = makeStyles(theme => ({
  toolBar: theme.mixins.toolbar,

  listIcon: {
    paddingLeft: theme.spacing(2),
    color: theme.palette.type === 'light' ? theme.palette.primary.dark : theme.palette.common.white,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    // padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  nestedIndicators: {
    paddingLeft: theme.spacing(6)
  },
  nestedSaved: {
    paddingLeft: theme.spacing(4)
  },
  root: {
    width: '100%',
    maxWidth: drawerWidth,
  },
}));


function LeftDrawer(props) {
  // Props
  const {selectedIndex, setSelectedIndex} = props;
  const darkMode = useSelector((state) => state.commonSettings.darkMode);

  // Variables
  let history = useHistory();
  const classes = useStyles();
  const [savedMenu, setSavedMenu] = useState(false);

  const savedMenuOptions = [{
    name: 'My Questions',
    route: 'myQuestions',
    icon: <LiveHelp/>
  }, {
    name: 'My Indicators',
    route: 'myIndicators',
    icon: <PhotoLibrary/>
  }]


  const handleListClick = (selectedIndex, route) => {
    setSelectedIndex(selectedIndex);
    history.push(`/${route}`);
    // setOpen(!open);
  }

  // Return statement
  return (
    <>
      <Grid container justify="center" alignItems="center" className={classes.toolBar}>
        {darkMode ? <img src={"/images/openlapDarkTheme.svg"} height='38' alt="Dark Theme Logo"/> :
          <img src={"/images/openlapLightTheme.svg"} height='38' alt="Light Theme Logo"/>}
      </Grid>

      <Divider/>

      <List>
        <ListItem
          button={selectedIndex !== 1}
          selected={selectedIndex === 1}
          onClick={() => handleListClick(1, 'dashboard')}
        >
          <ListItemIcon className={classes.listIcon}>
            <Home />
          </ListItemIcon>
          <ListItemText primary={'Dashboard'} secondary="My questions & indicators"/>
        </ListItem>

        {/*GQI Editor */}
        <ListItem
          button={selectedIndex !== 2}
          selected={selectedIndex === 2}
          onClick={() => handleListClick(2, 'editor')}
        >
          <ListItemIcon className={classes.listIcon}>
            <AssignmentIcon/>
          </ListItemIcon>
          <ListItemText primary={'GQI Editor'} secondary="Goal-Question-Indicator Editor"/>
        </ListItem>


        <ListItem
          button={selectedIndex !== 3}
          selected={selectedIndex === 3}
          onClick={() => handleListClick(3, 'gqi-new')}>
          <ListItemIcon className={classes.listIcon}>
            <ImportantDevicesIcon/>
          </ListItemIcon>
          <ListItemText primary={'GQI New'} secondary="Updated GQI"/>
        </ListItem>

        <ListItem
          button={selectedIndex !== 4}
          selected={selectedIndex === 4}
          onClick={() => handleListClick(4, 'isc-creator')}>
          <ListItemIcon className={classes.listIcon}>
            <ImportantDevicesIcon/>
          </ListItemIcon>
          <ListItemText primary={'ISC Creator'} secondary="Indicator Specification Card Creator"/>
        </ListItem>

        <ListItem
          button={selectedIndex !== 5}
          selected={selectedIndex === 5}
          onClick={() => handleListClick(5, 'demo')}>
          <ListItemIcon className={classes.listIcon}>
            <ImportantDevicesIcon/>
          </ListItemIcon>
          <ListItemText primary={'Demo'} secondary="Try question & indicator codes"/>
        </ListItem>

        {/*Indicators (collapsible)*/}
        {/*<ListItem*/}
        {/*  button={selectedIndex === 3 ? false : true}*/}
        {/*  selected={selectedIndex === 3}*/}
        {/*  onClick={() => handleListClick(3, 'indicatorEditor')}>*/}
        {/*  <ListItemIcon className={classes.listIcon} >*/}
        {/*    <PlaylistAddIcon />*/}
        {/*  </ListItemIcon>*/}
        {/*  <ListItemText primary={'Indicator Editor'} secondary="Basic, Composite & Multi-level"/>*/}
        {/*</ListItem>*/}

        {/*/!*Saved (collapsible)*!/*/}
        {/*<ListItem*/}
        {/*  button*/}
        {/*  onClick={() => setSavedMenu(!savedMenu)}>*/}
        {/*  <ListItemIcon className={classes.listIcon}>*/}
        {/*    /!*<Bookmarks />*!/*/}
        {/*    <FontAwesomeIcon icon={faArchive} size={'lg'}/>*/}
        {/*  </ListItemIcon>*/}
        {/*  <ListItemText primary={'Saved'} secondary="Under Development!"/>*/}
        {/*  {savedMenu ? <ExpandLess/> : <ExpandMore/>}*/}
        {/*</ListItem>*/}
        {/*<Collapse in={savedMenu} timeout="auto" unmountOnExit>*/}
        {/*  <List component="div" disablePadding>*/}
        {/*    {savedMenuOptions.map((option, index) => (*/}
        {/*      <ListItem*/}
        {/*        button={selectedIndex === index + 4 ? false : true}*/}
        {/*        key={index}*/}
        {/*        className={classes.nestedSaved}*/}
        {/*        selected={selectedIndex === index + 4}*/}
        {/*        onClick={() => handleListClick(index + 4, option.route)}*/}
        {/*      >*/}
        {/*        <ListItemIcon className={classes.listIcon} >*/}
        {/*          {option.icon}*/}
        {/*        </ListItemIcon>*/}
        {/*        <ListItemText primary={option.name} secondary="Under development!"/>*/}
        {/*      </ListItem>*/}
        {/*    ))}*/}
        {/*  </List>*/}
        {/*</Collapse>*/}
      </List>
    </>
  )
}

export default LeftDrawer;
